Prev Next

Print

The Sitecore.Web.UI.HtmlControls namespace contains a large number of ready-to-use out-of-the-box controls. We will experiment a little and add a few simple ones and then learn how to position them.

Explore the HtmlControls namespace to see all of the controls. There are dozens of them, so we will focus on the most important ones.

4.1.  Adding Controls

To add a control to a page, you simply need to add the corresponding tag to the layout.  This section shows how to add a few simple controls.

4.1.1.  Literal

Literal is a simple text container. The only property named ‘Text’ holds the actual text.

Example:

4.1.2.  Edit

Edit control is the Textbox analogue. It has three properties:

Example:

4.1.3.  Checkbox

Checkbox is another widely used control.

Example:

4.2.  Control Layout

Adding controls is simple, but to add them in the right places we need to learn how to define positioning in XAML.

4.2.1.  GridPanel

We’ll use the Sitecore.Web.UI.WebControls.GridPanel control as a container for the rest of the controls on our page. GridPanel renders to html as a table, with each of its children in a separate row, thus embedding each control in <tr><td></td></tr> tag constructions.

Note: You can use the ‘Columns’ property of the GridPanel to define the table. If you need three columns, simply add Columns=”3” in the GridPanel tag.

The above structure will be translated to:

The class property in the GridPanel sets CSS class for the HTML table. The remaining properties mirror their HTML table counterparts as well.

4.2.2.  Border

To align the text, let’s use another container control – Border. Border renders as a simple <div>[children]</div> block and allows you to separate one or several controls from the others (perhaps to apply some special style to it).

By adding the Border control, we’ve changed our only table cell from:

to:

At this point your layout should look similar to this:

Start the application again (or instead of opening a new window, you can use Ctrl+RightClick and select Refresh from the context menu).

4.2.3.  Space

Many developers are familiar with the technique of inserting 1px blank images and sizing them to the needed size to tweak the document layout. The Space control is used exactly for this purpose. Let’s insert another literal inside the border:

That would result in the second literal being placed right after the first one without any space between them. Of course, you can use other techniques to separate the content, like adding a column or using CSS styles, but often a blank image is a fast and effective solution. Add the Space control between the two literals:

The resulting application is shown below.

The generated html markup is: 

Note: You can also use the Height property of the Space control if desired.

Prev

Next